.@{avatar-prefix-cls} {
  position: relative;
  display: inline-flex;
  box-sizing: content-box;
  color: var(--nom-avatar-color);
  white-space: nowrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  background: var(--nom-avatar-background-color);
  border: 1px solid var(--nom-avatar-border-color);
  border-radius: var(--nom-avatar-border-radius);
  &.avatar-image {
    // background: transparent;
    > img {
      border-radius: var(--nom-avatar-border-radius);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
    }
  }

  > .nom-avatar-string {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    -webkit-transform-origin: 0 center;
    transform-origin: 0 center;
  }

  .img {
    display: block;
  }

  .avatar-size(@avatar-size-base, @avatar-font-size-base);

  &.p-size-xlarge {
    .avatar-size(@avatar-size-xl, @avatar-font-size-xl);
  }

  &.p-size-large {
    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
  }

  &.p-size-small {
    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
  }

  &.p-size-xsmall {
    .avatar-size(@avatar-size-xs, @avatar-font-size-xs);
  }

  &.u-shape-square {
    border-radius: @avatar-border-radius;
    > img {
      border-radius: @avatar-border-radius;
    }
  }

  & > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.avatar-size(@size, @font-size) {
  width: @size;
  height: @size;
  line-height: @size;

  &-string {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
  }

  > .nom-icon {
    font-size: @font-size;
  }
}
